<template>
    <div>
    <div class="block">
         <span class="demonstration" style="margin-left:8%">请选择日期</span>
    <el-date-picker
      ref="yearpick"
      type="month"
      v-model="defaultyear"
      @change="refresh"
      value-format=“yyyy-MM-dd”
      placeholder="选择月">
    </el-date-picker>

  <el-row :gutter="15" >
  <el-col :span="12"><div class="grid-content bg-purple" style="margin-left:15%;margin-top:5%;">
  <div style="margin: 14px;">
  <span style="margin:14px;font-size:25px;color:blue;">{{chengben+'万元'}}</span>

          <span style="margin:5px">{{'本年营业总成本'}}</span>

          <span >{{ '环比 '+chengbenhb+'%' }}</span>
          <i :class='[chengbenhb>0?"el-icon-top" : "el-icon-bottom"]' :style="{'color' : chengbenhb>0 ? 'green' : 'red'}"></i>

          <span style="margin-left:10px">{{ '同比 '+chengbentb +'%'}}
            <i :class='[chengbentb>0?"el-icon-top" : "el-icon-bottom"]' :style="{'color' : chengbentb>0 ? 'green' : 'red'}"></i>
</span>       </div>
 </div></el-col>

</el-row>
</div>
    <div id="myChart"  style="width:100%;height:750px;margin-top:1%"></div>
             <el-table
            :data="students"
            border
            style="width: 100%">
            <el-table-column
              prop="name"
              width="150"
              align="center"
              label="模块/日期"
              fixed
            >
            </el-table-column>
            <template v-for='(col,i) in datalist'>
              <el-table-column
                :show-overflow-tooltip="true"
                :label="col"
                :key="col"
                width="100"
                align="center"
              >
                <template slot-scope="scope">
                  <span>
                      {{scope.row.list[i].number}}
                </span>
                </template>
              </el-table-column>
            </template>
          </el-table>
    </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'hello',
  data () {
    return {
    // 成本环比
      chengbenhb: 30,
      // 成本同比
      chengbentb: 20,
      // 营业成本总额
      chengben: 5345.6,
      // 默认年份
      defaultyear: '',
      // 销量、产量、存量数据信息
      students: [],
      // 下方表格的横坐标值，日期值
      datalist: [],
      // echarts的属性设置
      option: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['营业成本']
        },
        xAxis: {
          data: [],
          name: '时间/月份'
        },
        yAxis: {
          name: '金额/万元'
          // data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        series: [{
          name: '营业成本',
          // data: [4,5,4,5,6,7,8,9,10,3,4,7],
          data: [],
          type: 'bar',
          // stack:"数量",
          itemStyle: {
            normal: {
              label: {
                show: true, // 开启显示
                position: 'inside', // 在上方显示
                textStyle: { // 数值样式
                  color: 'white',
                  fontSize: 16
                }
              }
            }
          }
        }]
      }
    }
  },
  mounted () {
    // mounted--钩子函数，一来到该页面即执行，这里面让其执行init()函数。
    this.drawLine()
    this.init()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      this.$axios({
        method: 'get',
        url: 'http://127.0.0.1:8080/getChengbenForecharts',
        params: {
          'year': this.$refs.yearpick.value
        }
      }).then((response) => { // 这里使用了ES6的语法
        // myChart.hideLoading();
        var Data2 = response.data
        console.log(Data2) // 请求成功返回的数据
        this.option.xAxis.data = Data2[0]
        this.option.series[0].data = Data2[1]
        // this.option.series[1].data = Data2[2];
        myChart.setOption(this.option)
        console.log(Data2)
      }).catch((error) => {
        console.log(error) // 请求失败返回的数据
      })
      myChart.setOption(this.option)
    },
    // 初始化，请求后台产品销售等数据
    init () {
      this.$axios({
        method: 'get',
        url: 'http://127.0.0.1:8080/getChengben',
        params: {
          'year': this.$refs.yearpick.value
        }
      }).then((response) => { // 这里使用了ES6的语法
        var Data = response.data
        console.log(response.data) // 请求成功返回的数据
        this.students = Data
        this.datalist = Data[0].datelist
      }).catch((error) => {
        console.log(error) // 请求失败返回的数据
      })
      this.$axios({
        method: 'get',
        url: 'http://127.0.0.1:8080/getChengbenPercent',
        params: {
          'year': this.$refs.yearpick.value
        }
      }).then((response) => { // 这里使用了ES6的语法
        var Data3 = response.data
        console.log(response.data) // 请求成功返回的数据
        this.chengben = Data3[0].chengben
        this.chengbenhb = Data3[0].chengbenhb
        this.chengbentb = Data3[0].chengbentb
      }).catch((error) => {
        console.log(error) // 请求失败返回的数据
      })
    },
    refresh () {
      this.drawLine()
      this.init()
    }
  }
}
</script>
